<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        //传统事件注册解绑  event.onclick = 'null';
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function(){ 
                alert('你好');
            this.onclick = 'null';
        }
        
        divs[1].addEventListener('click',fn);//里面的fn 不需要调用加小括号
        function fn(){
            alert('11');
            divs[1].removeEventListener('click',fn);
        }

        divs[2].attachEvent('onclick',fn1);//只能ie9以下版本使用
        function fn1(){
            alert('22');
            divs[2].detachEvent('onclick',fn1);
        }

        //删除事件兼容性解决方案
        function removeEventListener(element,eventName,fn){
            //判断当前浏览器是否支持removeEventListener方法
            if(element.removeEventListener){
                element.removeEventListener(eventName,fn);//第三个参数 默认为false

            }else if (Element.detachEvent){
                element.detachEvent('on' + eventName,fn);
            }else{
                element['on' + eventName ]  = null;
            }
        }
    </script>
</body>
</html>